<template>
    <section class="markeIndex" v-loading="IndexLoading">
        <div style="margin: 35px auto 0 auto;width: 1400px">
            <div  v-for="(item, index) in indexList"  :key="index" :style="generateReviewContentStatus(item)"  :class="`task_item`">
                <div class="detail" style="position: relative">
<!--                    <el-image v-if="item.status==='0'" src="../../static/img/csj/unconfirmed.png" style="position: absolute;top: -1px;right: 0"></el-image>-->
<!--                    <el-image v-else src="../../static/img/csj/confirmed.png" style="position: absolute;top: -1px;right: 0"></el-image>-->
                    <el-col :span="5" v-show="item.quotaName" style="text-align: left;margin-left: 15px">
                        <span style="color:#aaa;">二级指标名称：</span>
                        <span style="font-weight: 700">{{item.quotaName}}</span>
                    </el-col>
                    <el-col :span="5"  style="text-align: left;margin-left: 5px">
                        <span style="color:#aaa;">分值：</span>
                        <span style="font-weight: 700">{{item.quotaScore}}</span>
                    </el-col>
                    <el-col :span="2" :offset="11">
                        <el-link :underline="false" @click="marker(item,'edit')" style="color: #43C089;" v-if="currentObjStatus === '0'">打分</el-link>
                        <el-link :underline="false" @click="marker(item,'look')" style="color: #8392ff" v-else>查看</el-link>
                    </el-col>
                </div>
            </div>
        </div>
    </section>
</template>

<script>
    export default {
        name: "markeIndex",
        data(){
            return{
                IndexLoading:false,
                hasTask:false,
            }
        },
        props: {
            indexList: {
                type: Array
            },
            currentObjStatus: {
                type: String
            }
        },
        methods:{
            generateReviewContentStatus(item) {
                let style = {
                    'line-height': '50px'
                };
                if (item.status === '0') {
                    style.border = '1px solid #C5C5C5';
                } else  {
                    style.border = '1px solid #55BD94';
                }
                return style;
            },
            marker(item,type){
                this.$emit('makeMarker', item , type)
            }
        },
    }
</script>

<style scoped>
    .markeIndex {
        overflow: hidden;
        font-family:Source Han Sans CN!important;
        font-size: 16px;
    }
    .markeIndex .task_item {
        display: flex;
        margin: 15px 0;
        height: 50px;
        line-height: 50px;
        border-radius: 5px;
        background-color: #fff;
        box-shadow: 0 2px 12px 0 rgba(0,0,0,.1);
        cursor: pointer;
        transition: all .4s;
    }
    .markeIndex .task_item:hover {
        transform: translateY(-3px) scale3d(1.01,1.01,1.01);
        background-color: #a6eaf538;
        cursor: pointer;
    }
    .markeIndex  .active_index {
        background-color: #a6eaf538;
    }
    .image_box {
        text-align: center;
        line-height: 56px;
    }
    .detail {
        flex: 1;
        text-align: center;
    }
    /* .detail span {
        font-weight: 700;
    } */
    .detail .el-col span:nth-child(1) {
        font-weight: normal;
    }
    .no_task {
        width: 100%;
        text-align: center;
        margin: 60px auto 0 auto;
    }

    .el-pagination {
        margin-top: 10px;
        float: right;
        margin-right: 3px;
    }
    .towMake{
        margin-top: 30px;
        border-bottom: 2px solid #D7F4E9;
        height: 35px;
        width: 100%;
    }
    .titleReleave{
        text-align: left;
        border-left: 4px solid #55BD94;
        font-size: 18px;
        font-weight: bold;
    }
    .titleReleave span{
        color: #303030;
        font-weight:bold;
        font-size:20px;
        padding-left: 10px;
    }
</style>
<style>
    .detail .el-col-4 {
        text-align: center;
    }
</style>

